<script setup lang="ts">
import { computed, ref } from 'vue'
import { useUserStore } from '@/stores/user'

const store = useUserStore()
const name = computed(() => store.name)
const role = computed(() => store.role)
const fileRef = ref<HTMLInputElement>()

const onFile = (e: Event) => {
  const input = e.target as HTMLInputElement
  const file = input.files?.[0]
  if (!file || !store.name) return
  const reader = new FileReader()
  reader.onload = () => {
    store.setAvatar(store.name as string, String(reader.result))
  }
  reader.readAsDataURL(file)
}
</script>

<template>
  <div style="padding:16px">
    <el-card>
      <h3>个人中心</h3>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户名">{{ name }}</el-descriptions-item>
        <el-descriptions-item label="角色">{{ role }}</el-descriptions-item>
        <el-descriptions-item label="头像">
          <div style="display:flex; align-items:center; gap:12px">
            <img v-if="store.avatar" :src="store.avatar" style="width:64px;height:64px;border-radius:50%;object-fit:cover" />
            <div v-else style="width:64px;height:64px;border-radius:50%;background:#ddd;display:flex;align-items:center;justify-content:center">无</div>
            <el-button type="primary" @click="fileRef?.click()">上传头像</el-button>
            <input ref="fileRef" type="file" accept="image/*" style="display:none" @change="onFile" />
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>
  </div>
  
</template>

<style scoped>
</style>


